.user-page {
  background-color: #f5f5f5;
  min-height: 100vh;

  .user-card {
    box-shadow: inset 0 2px 0 0 #f5f5f5;
  }

  .user-score {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      font-size: 28px;
    }
    .score-value {
      font-size: 32px;
      color: #333333;
      font-weight: bold;
    }
    .score-label {
      color: #999;
    }
  }

  &__body {
    margin-top: 20px;
    min-height: 300px;
    background-color: #fff;
    padding-left: 40px;
  }

  .cell-item {
    display: flex;
    align-items: center;
    font-size: 32px;
    padding: 0 30px 0 0;
    height: 150px;
    box-shadow: inset 0 -2px 0 0 #f5f5f5;

    &__title {
      flex: 1;
      color: #222222;
      font-weight: 500;
    }

    &__icon {
      font-size: 48px;
      color: @primary;
      margin-right: 12px;
    }

    &__arrow {
      font-size: 36px;
      color: #cccccc;
    }
  }
}

.info-page {
  min-height: 100vh;
  background-color: #f5f5f5;

  .drug-group {
    padding-left: 40px;
    display: flex;
    align-items: flex-start;

    &__index {
      line-height: 108px;
      width: 1em;
      padding-right: 10px;
    }

    &__content {
      flex: 1;
    }
    .van-cell {
      padding-left: 0;
      &::after {
        left: 0;
        right: 0;
      }
    }
    &::before {
      content: attr(data-index);
    }
    .van-field__label {
      white-space: nowrap;
    }
  }

  .drug-group + .drug-group {
    border-top: 1px solid #f5f5f5;
  }

  .van-cell-group {
    margin-bottom: 20px;
  }
  .van-cell-group__title {
    font-size: 36px;
    font-family: @font-medium;
    font-weight: 500;
    color: #222222;
    padding: 30px 40px;
    position: relative;
    line-height: 48px;
    background-color: #ffffff;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      height: 32px;
      width: 8px;
      border-radius: 0 8px 8px 0;
      background-color: @primary;
    }
  }

  .van-cell {
    font-size: 32px;
    line-height: 48px;
    padding: 30px 40px;
    color: #646566;
  }

  picker {
    position: relative;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 32px;
      bottom: 0;
      left: 32px;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: rgb(235, 237, 240);
    }
  }

  .van-field__control {
    text-align: right;
    color: #333333;
  }

  .avatar-img-wrap {
    position: absolute;
    top: 8px;
    right: 40px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 0;
    background-color: lightgray;
  }

  .avatar-img {
    width: 100%;
    height: 100%;
  }

  .van-cell--avatar {
    .van-cell__value {
      position: static;
      overflow-y: visible;
    }
  }

  .van-swipe-cell__wrapper {
    display: flex;
    align-items: flex-start;
    flex: 1;
  }

  .van-button--danger {
    height: 100%;
  }

  .van-button--mini {
    width: 100px;
  }

  .custom-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

}
